<template>
  <div>
    <el-row :gutter="18">
      <el-col :span="8">
        <el-select size="mini"
                   v-model="form.province" placeholder="请选择省" @change="provinceChange">
          <el-option v-for="item in provinces" :key="item.code" :label="item.name" :value="item.code">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-select size="mini"  v-model="form.city"
                   placeholder="请选择市" @change="cityChange">
          <el-option v-for="item in cities" :key="item.code" :label="item.name" :value="item.code">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-select size="mini" v-model="form.area"
                   placeholder="请选择区" @change="areaChange">
          <el-option v-for="item in areas" :key="item.code" :label="item.name" :value="item.code">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-input size="mini" type="text" :placeholder="comp.config.placeholder || '请输入内容'" clearable style="width: 100%;" v-model="form.address">
    </el-input>
    <slot/>
  </div>
</template>

<script>
import {Province} from '@/utils/provinces'
import {Cities} from '@/utils/cities'
import {Areas} from '@/utils/areas'
export default {
  name: "addressView",
  components: {},
  props: ['comp'],
  data() {
    return {
      provinces: [], //省份数组
      cities: [], //市数组
      areas: [], //区数组
      form: {
        province: '', // 省名称
        city: '', // 市名称
        area: '', // 区名称
        address: ''
      },
    };
  },
  created() {
    this.provinces = Province
    this.cities = Cities
    this.areas = Areas
  },
  computed: {},
  methods: {
    provinceChange(e) { //省份选择函数
      console.log('event', e)
      this.form.city = ''
      this.form.area = ''
    
      this.provinces.map(item => {
        if (item.code == e) {
          this.form.province = item.name
        }
      })
      //存放新城市(过滤掉 不是该省的城市)
      var newCity = []
      Cities.map(item => {
        if (item.provinceCode == e) {
          newCity.push(item)
        }
      })
      this.cities = newCity
      //存放新城市
    
      //存放新 区数组（不是该省的区）
      var newAreas = []
      Areas.map(item => {
        if (item.provinceCode == e) {
          newAreas.push(item)
        }
      })
      this.areas = newAreas
      //存放新 区数组
    
    },
    
    cityChange(e) { //城市选择函数
      this.form.cityCode = e
      this.cities.map(item => {
        if (item.code == e) {
          this.form.city = item.name
        }
      })
    },
    
    areaChange(e) { //区选择函数
      this.form.areaCode = e
      this.areas.map(item => {
        if (item.code == e) {
          this.form.area = item.name
        }
      })
    },
  },
  mounted() {

  }
}
</script>,
<style lang="scss" scoped>
.address-select {
  width: 100%;

  &.none-event {
    pointer-events: none;
  }
}
</style>
